<template lang="html">
  <div class="editor">
	  
	
   <!-- <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div> -->
  </div>
</template>

<script>
/*  import E from 'wangeditor' */
export default {
	name: 'editoritem',
	data() {
		return {
			msg_user: '',
			// uploadPath,
			editor: null,
			info_: null,
			isImg: false,
		};
	},
	model: {
		prop: 'value',
		event: 'change',
	},
	props: {
		/** 索引值 用于更新数据 */
		index: Number,
		/** 包含数据源 */
		item: Object,
		disabled: {
			type: Boolean,
			default: false,
		},
		/** 自定义数据源 */
		relation: Object,
		value: {
			type: String,
			default: '',
		},
		isClear: {
			type: Boolean,
			default: false,
		},
		type: {
			type: String,
			default: '',
		},
	},
	watch: {
		isClear(val) {
			// 触发清除文本域内容
			if (val) {
				this.editor.txt.clear();
				this.info_ = null;
			}
		},
		value: function (value) {
			if (value !== this.editor.txt.html()) {
				this.editor.txt.html(this.value);
			}
		},
		msg_user: function (value) {
			if (value && value != '') {
				this.$emit('value-change', { value: value });
			}
		},
		//value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
	},
	mounted() {
		/* this.seteditor()
      this.editor.txt.html(this.value) */
	},
	methods: {
		checkVal(str) {
			let num = 0,
				reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br>)+<\/p>/g;
			while (num < str.length && str != '') {
				num++;
				let k = str.match(reg);
				if (k) {
					str = str.replace(k[0], '');
				}
			}
			return str == '';
		},
		seteditor() {
			// http://192.168.2.125:8080/admin/storage/create
			this.editor = new E(this.$refs.toolbar, this.$refs.editor);
			this.editor.customConfig.uploadImgShowBase64 = false; // base 64 存储图片
			this.editor.customConfig.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'; // 配置服务器端地址
			this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header
			this.editor.customConfig.uploadFileName = 'file'; // 后端接受上传文件的参数名
			this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 10M
			this.editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
			this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间

			var reply_type = [
				'head', // 标题
				// 'bold', // 粗体
				// 'fontSize', // 字号
				// 'fontName', // 字体
				// 'italic', // 斜体
				// 'underline', // 下划线
				// 'foreColor', // 文字颜色
				// 'backColor', // 背景颜色
				//'link', // 插入链接
				'list', // 列表
				'justify', // 对齐方式
				'quote', // 引用
				'emoticon', // 表情
				//'image', // 插入图片
				//'video', // 插入视频
				'undo', // 撤销
			];
			if (this.type == 'reply') {
				reply_type = [
					'emoticon', // 表情
					//'image', // 插入图片
					//'video', // 插入视频
				];
			}
			// 配置菜单
			this.editor.customConfig.menus = reply_type;

			this.editor.customConfig.uploadImgHooks = {
				fail: (xhr, editor, result) => {
					// 插入图片失败回调
				},
				success: (xhr, editor, result) => {
					// 图片上传成功回调
					this.isImg = true;
				},
				timeout: (xhr, editor) => {
					// 网络超时的回调
				},
				error: (xhr, editor) => {
					// 图片上传错误的回调
				},
				customInsert: (insertImg, result, editor) => {
					// 图片上传成功，插入图片的回调
					//result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
					//insertImg()为插入图片的函数
					//循环插入图片
					// for (let i = 0; i < 1; i++) {
					let url = 'http://otp.cdinfotech.top' + result.url;
					insertImg(url);
					// }
				},
			};
			this.editor.customConfig.onchange = (html) => {
				if (this.isImg) {
					var ling = 'style="max-width:50%;"';
					html = html.replace(/style="max-width:100%;"/g, ling);
					html = html + '<p><br></p>';
					this.isImg = false;
				}
				this.info_ = html; // 绑定当前逐渐地值
				if (this.type == 'bbs') {
					if (this.checkVal(this.info_)) {
						this.info_ = '';
					}
					let data = {
						index: this.index,
						fieldName: this.item.data.fieldName,
						value: this.info_,
					};
					this.$emit('value-change', data); // 将内容同步到父组件中
				}
			};
			// 创建富文本编辑器
			this.editor.create();
		},
	},
};
</script>

<style lang="css">
.editor {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 100;
}
.toolbar {
	border: 1px solid #ccc;
	flex-wrap: wrap !important;
}
.text {
	border: 1px solid #ccc;
	min-height: 70px;
}
</style>